<template>
    <view>
        <view style="padding: 10px; margin: 5px; background-color: #ba8d76; border-radius: 10px">
            <view style="display: flex">
                <view style="margin-left: 10px">
                    <view style="display: flex; justify-content: space-between">
                        <view>{{ serviceRecord.ciName }}</view>
                        <u-button
                            v-if="staffInfo?.orUuid && serviceRecord.crStat === '待确认'"
                            plain
                            hairline
                            size="small"
                            type="primary"
                            text="添加服务项目"
                            @click="() => goToChooseServiceItemPage(serviceRecord)"
                        ></u-button>
                    </view>
                    <view style="font-size: 14px; color: #fff; margin-top: 3px">客户电话：{{ serviceRecord.ciPhon }}</view>
                    <view style="font-size: 14px; color: #fff; margin-top: 3px">接待员工：{{ serviceRecord.crRsna }}</view>
                    <view style="font-size: 14px; color: #fff; margin-top: 3px">创建日期: {{ UTCTimeToLocal(serviceRecord.crCrti) }}</view>
                </view>
            </view>
        </view>
        <view style="padding: 10px; margin: 5px; background-color: #fff; border-radius: 10px">
            <view class="divider" style="width: 300px">
                <view class="line"></view>
                <view class="text">服务项目清单</view>
                <view class="line"></view>
            </view>
            <view v-if="serviceRecord?.detail?.nodes?.length > 0" style="margin-top: 10px">
                <uni-card v-for="(item, index) in serviceRecord?.detail?.nodes" :is-shadow="false" :is-full="true" padding="0" margin="0">
                    <template v-slot:title>
                        <view style="display: flex; justify-content: space-between; font-size: 14px; padding: 10px 0">
                            <view> {{ index + 1 + "." + item.siName + "  x " + item.cdQuat + item.service.siUnit }}</view>
                        </view>
                    </template>
                    <view style="display: flex; height: auto; padding: 0">
                        <view style="flex: 1">
                            <view style="display: flex">
                                <view style="flex: 1; justify-content: space-between">
                                    <text>客户确认状态</text>
                                </view>
                                <view
                                    ><text>{{ item.cdCust }}</text></view
                                >
                            </view>
                            <view style="display: flex">
                                <view style="flex: 1; justify-content: space-between">
                                    <text>技师名称:{{ item.cdSsna }}</text>
                                </view>
                                <view
                                    ><text>{{ item.cdStst }}</text></view
                                >
                            </view>
                            <view style="text-align: right; display: flex; justify-content: space-between">
                                <view></view>
                                <view style="display: flex; margin-top: 15px; margin-bottom: 10px">
                                    <u-button
                                        v-if="staffInfo?.orUuid === item.cdSsid && item.cdCust === '待确认' && item.cdStst === '待确认' && serviceRecord.crStat === '待确认'"
                                        plain
                                        hairline
                                        size="small"
                                        type="primary"
                                        text="更改数量"
                                        @click="() => editQuant(item)"
                                    ></u-button>
                                    <u-button
                                        v-if="staffInfo?.orUuid === item.cdSsid && item.cdCust === '待确认' && item.cdStst === '待确认' && serviceRecord.crStat === '待确认'"
                                        plain
                                        hairline
                                        size="small"
                                        type="primary"
                                        text="更换技师"
                                        style="margin-left: 10px"
                                        @click="() => goToChangeServiceStaffPage(item)"
                                    ></u-button>
                                    <u-button
                                        v-if="staffInfo?.orUuid === item.cdSsid && item.cdCust === '待确认' && item.cdStst === '待确认' && serviceRecord.crStat === '待确认'"
                                        plain
                                        hairline
                                        size="small"
                                        type="error"
                                        text="删除项目"
                                        style="margin-left: 10px"
                                        @click="() => deleteCurrentServiceItem(item)"
                                    ></u-button>
                                    <u-button
                                        v-if="staffInfo?.orUuid === item.cdSsid && item.cdStst === '待确认' && serviceRecord.crStat === '待确认'"
                                        plain
                                        hairline
                                        size="small"
                                        type="success"
                                        text="确认项目"
                                        @click="() => confirmCurrentServiceItem(item)"
                                        style="margin-left: 10px"
                                    ></u-button>
                                </view>
                            </view>
                        </view>
                    </view>
                </uni-card>
                <button v-if="staffInfo?.orUuid && serviceRecord.crStat === '待确认'" type="primary" @click="submit">提交服务清单</button>
            </view>
            <u-empty v-if="serviceRecord?.detail?.nodes?.length === 0" text="暂无服务项目信息"> </u-empty>
        </view>
        <view>
            <uni-popup ref="inputDialog" type="dialog">
                <uni-popup-dialog
                    ref="inputClose"
                    mode="input"
                    :title="'该项目剩余' + quant + selectItem.service?.siUnit"
                    :value="selectItem.cdQuat"
                    placeholder="请输入内容"
                    @confirm="changeServiceItemQuant"
                ></uni-popup-dialog>
            </uni-popup>
        </view>
    </view>
</template>

<script>
import { getCustomerServiceItemList, deleteCurrentServiceItem, updateCurrentServiceItem, getServiceItemQuant, submitServiceOrder } from "../../utils/api";
import { mapGetters } from "vuex";

export default {
    data() {
        return {
            serviceRecord: {},
            customerRankFissionAmount: [], // 裂变订单总额
            selectItem: "",
            ciUuid: "",
            quant: 0,
        };
    },

    async onLoad(params) {
        console.log(params, 111);
        if (params.ciUuid) {
            this.ciUuid = params.ciUuid;
            let resList = await getCustomerServiceItemList({ ciUuid: params.ciUuid, crStat: "待确认" });
            if (resList) this.serviceRecord = resList[0] || [];
        }
        if (params.crUuid) {
            let resList = await getCustomerServiceItemList({ crUuid: params.crUuid });
            if (resList) this.serviceRecord = resList[0] || [];
            this.ciUuid = resList[0].ciUuid;
        }
    },

    async onPullDownRefresh() {
        let ciUuid = this.ciUuid;
        let resList = await getCustomerServiceItemList({ ciUuid, crStat: "待确认" });
        if (resList) {
            this.serviceRecord = resList[0] || [];
            uni.stopPullDownRefresh();
        }
    },

    computed: {
        ...mapGetters({
            staffInfo: "personInfo/staffInfo",
        }),
    },

    methods: {
        goToChooseServiceItemPage(item) {
            uni.navigateTo({
                url: `choose_service_item?ciUuid=${item.ciUuid}&crUuid=${item.crUuid}`,
            });
        },

        goToChangeServiceStaffPage(item) {
            uni.navigateTo({
                url: `change_service_staff?siUuid=${item.siUuid}&crUuid=${item.crUuid}&ciUuid=${this.ciUuid}`,
            });
        },

        async deleteCurrentServiceItem(item) {
            let res = await deleteCurrentServiceItem({ crUuid: item.crUuid, siUuid: item.siUuid });
            if (res) {
                let pages = getCurrentPages();
                let currPage = pages[pages.length - 1];
                currPage.onLoad({ ciUuid: this.ciUuid });
                uni.showToast({ title: "删除成功！", icon: "success", duration: 1000 });
            }
        },

        async editQuant(item) {
            this.selectItem = item;
            let ciUuid = this.ciUuid;
            let res = await getServiceItemQuant({ ciUuid, siUuid: item.siUuid, spVldy: new Date().getUTCTime() });
            if (res) {
                this.quant = res;
                this.$refs.inputDialog.open();
            } else {
                uni.showToast({ title: "无待核销数量", icon: "error", duration: 1000 });
            }
        },

        async confirmCurrentServiceItem(item) {
            let saveData = {
                crUuid: item.crUuid,
                siUuid: item.siUuid,
                cdStst: "已确认",
                cdCsti: new Date().getUTCTime(),
            };
            let res = await updateCurrentServiceItem(saveData);
            if (res) {
                let pages = getCurrentPages();
                let currPage = pages[pages.length - 1];
                currPage.onLoad({ ciUuid: this.ciUuid });
            }
        },

        async changeServiceItemQuant(val) {
            if (Number(val) > this.quant) return uni.showToast({ title: "超过已有数量", icon: "error", duration: 1000 });
            let saveData = {
                crUuid: this.selectItem.crUuid,
                siUuid: this.selectItem.siUuid,
                cdQuat: parseInt(val),
            };
            let res = await updateCurrentServiceItem(saveData);
            if (res) {
                let pages = getCurrentPages();
                let currPage = pages[pages.length - 1];
                currPage.onLoad({ ciUuid: this.ciUuid });
                uni.showToast({ title: "更改成功！", icon: "success", duration: 1000 });
            }
        },

        async submit() {
            let order = this.serviceRecord;
            console.log(order);
            if (order?.detail?.nodes?.findIndex((item) => item.cdCust === "待确认" || item.cdStst === "待确认") !== -1)
                return uni.showToast({ title: "还有未确认的项目", icon: "error", duration: 1000 });
            let res = await submitServiceOrder(this.serviceRecord);
            if (res) {
                uni.showToast({ title: "核销成功！", icon: "success", duration: 1000 });
                uni.navigateBack();
            }
        },
    },
};
</script>

<style lang="scss" scoped>
.divider {
    display: flex;
    flex-direction: row;
    align-items: center;
    margin: 15px auto;

    .line {
        flex: 1;
        margin: 0;
        border-bottom-width: 1px;
        border-bottom-style: solid;
        width: 100%;
        transform: scaleY(0.5);
    }

    .text {
        text-align: center;
        margin: 0 15px;
    }
}
</style>
